<script setup>
import {onMounted, ref} from 'vue';
import {ElButton, ElCol, ElForm, ElInput, ElOption, ElRow, ElSelect} from 'element-plus';
import {editGoods, getCategory, queryGoodsById} from '@/apis/goods.js';

// 从父组件获取数据
const props = defineProps({
  // 非空对象
  goodsMsg: {
    type: Object,
    require: true
  }
})

// 从父组件获取关闭的方法
const emit = defineEmits(['closeDrawer'])
const closeDrawer = () => {
  emit('closeDrawer')
}

const formData = ref({})
formData.value = props.goodsMsg

const rules = ref({
  userName: [],
  categoryId: [],
  title: [],
  description: [],
  price: [],
  storage: [],
  degree: [],
  remarks: [],
});

const categoryOptions = ref([]);
let id = '';

const init = async () => {
  await getCategoryList();
};

const getCategoryList = async () => {
  await getCategory().then((res) => {
    if (String(res.data.code) === '1') {
      categoryOptions.value = res.data.data;
    } else {
      // Handle error
      ElMessage.error(res.data.msg || '分类信息获取失败');
    }
  }).catch((err) => {
    // Handle error
    ElMessage.error('请求出错了：' + err);
  });
};

const submitEdit = () => {
  const params01 = {
    ...formData.value,
  };
  console.log(params01);
  editGoods(params01).then((res) => {
    if (res.data.code === 1) {
      console.log("fhz")
      console.log(res.data);
      ElMessage.success('修改成功');
      closeDrawer();
    } else {
      ElMessage.error(res.data.msg || '操作失败');
    }
  }).catch((error) => {
    ElMessage.error(error);
  });
};
const resetForm = (id) => {
  console.log('reset')
  console.log(id)
  console.log(formData.value)
  queryGoodsById(id).then((res) => {
    if (res.data.code === 1) {
      formData.value = res.data.data;
      console.log("res")
      console.log(res)
      console.log(formData.value)
    } else {
      // Handle error
      ElMessage.error(res.data.msg || '重置失败');
    }
  }).catch((err) => {
    // Handle error
    ElMessage.error('请求出错了：' + err);
  });
};

onMounted(() => {
  init();
});

</script>

<template>
  <div id="editGoods">
    <el-form :model="formData" :rules="rules" label-position="left" label-width="px">
          <el-form-item label="发布人：" label-width="85px" prop="userName">
            <el-input v-model="formData.userName" :style="{width: '100%'}" clearable placeholder="请输入发布人"
                      readonly></el-input>
          </el-form-item>
          <el-form-item label="商品分类" label-width="85px" prop="categoryId">
			<el-select v-model="formData.categoryId" :style="{width: '100%'}" clearable placeholder="请选择商品分类">
			   <el-option
			     v-for="(item, index) in categoryOptions"
			     :key="item.id" 
			     :label="item.name" 
			     :value="item.id" 
			   ></el-option>
			 </el-select>
          </el-form-item>
          <el-form-item label="标题：" label-width="85px" prop="title">
            <el-input v-model="formData.title" :style="{width: '100%'}" clearable placeholder="请输入标题"></el-input>
          </el-form-item>
          <el-form-item label="描述：" label-width="85px" prop="description">
            <el-input v-model="formData.description" :style="{width: '100%'}" clearable
                      placeholder="请输入描述"></el-input>
          </el-form-item>
          <el-form-item label="价格：" label-width="85px" prop="price">
            <el-input v-model="formData.price" :style="{width: '100%'}" clearable placeholder="请输入价格"
                      readonly></el-input>
          </el-form-item>
          <el-form-item label="内存容量：" label-width="85px" prop="storage">
            <el-input v-model="formData.storage" :style="{width: '100%'}" clearable placeholder="请输入内存容量"
                      readonly></el-input>
          </el-form-item>
          <el-form-item label="新旧程度：" label-width="85px" prop="degree">
            <el-input v-model="formData.degree" :style="{width: '100%'}" clearable placeholder="请输入新旧程度："
                      readonly></el-input>
          </el-form-item>
          <el-form-item label="备注：" label-width="85px" prop="remarks">
            <el-input v-model="formData.remarks" :autosize="{minRows: 4, maxRows: 4}" :maxlength="200"
                      :style="{width: '100%'}"
                      placeholder="请输入备注：" show-word-limit type="textarea"></el-input>
          </el-form-item>
          <el-form-item size="large">
            <el-button type="primary" @click="submitEdit">提交</el-button>
            <el-button @click="resetForm(formData.id)">重置</el-button>
          </el-form-item>
      </el-form>
  </div>
</template>

<style scoped>
#editGoods {
  width: 100%;
  height: 100%;
  padding: 20px 40px;
}
</style>